<template>
  <div class="page">
    <div id="total_charts" class="charts-item" :style="{ width: '100%', height: '340px' }"></div>
    <div id="vip_percentage_charts" class="charts-item" :style="{ width: '100%', height: '340px', 'margin-top': '50px' }"></div>
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%" max-height="500">
        <el-table-column prop="dataDate" label="日期" width="120"/>
        <el-table-column prop="memberUv" label="总会员数"/>
        <el-table-column prop="plusMemberUv" label="plus用户数"/>
        <el-table-column prop="plusPercent" label="plus占比">
          <template #default="scope">
            <span>{{scope.row.plusPercent}}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="proMemberUv" label="pro用户数"/>
        <el-table-column prop="proPercent" label="pro占比">
          <template #default="scope">
            <span>{{scope.row.proPercent}}%</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onBeforeUnmount, ref} from "vue";
import api from '../../api/index.js'
import * as echarts from "echarts";

const tableData = ref([])
const chartsObj = {}
const initLineCharts = (id, title, xData, seriesData, tooltip) => {
  if (!chartsObj[id]) {
    chartsObj[id] = echarts.init(document.getElementById(id));
  }
  chartsObj[id].setOption({
    title: {
      text: title,
      left: '20%',
    },
    tooltip: tooltip || {
      trigger: 'axis'
    },
    legend: {
      data: seriesData.map((item) => item.name)
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xData,
      axisLabel : { // 坐标轴刻度标签的相关设置。
        interval: 0,
        rotate: '45'
      },
    },
    yAxis: {
      type: 'value'
    },
    series: seriesData,
  });
}
onMounted(() => {
  window.onresize = function () {
    Object.keys(chartsObj).forEach((k) => {
      chartsObj[k] && chartsObj[k].resize();
    })
  }
})
onBeforeUnmount(() => {
  Object.keys(chartsObj).forEach((k) => {
    chartsObj[k] && chartsObj[k].dispose();
  })
})
const getVipData = async () => {
  try {
    const res = await api.getVipData()
    if (res.data && res.data.length) {
      tableData.value = res.data
      const xData = []
      const seriesData1 = [
        {
          name: '总会员数',
          type: 'line',
          color: '#f54e06',
          data: []
        }
      ]
      const seriesData2 = [
        {
          name: 'plus占比',
          type: 'line',
          color: '#296dce',
          data: []
        },
        {
          name: 'pro占比',
          type: 'line',
          color: '#f54e06',
          data: []
        }
      ]
      res.data.forEach((data) => {
        xData.push(data.dataDate)
        seriesData1[0].data.push(data.memberUv)
        seriesData2[0].data.push(data.plusPercent)
        seriesData2[1].data.push(data.proPercent)
      })
      initLineCharts('total_charts', '总会员数', xData, seriesData1)
      initLineCharts('vip_percentage_charts', '会员比例', xData, seriesData2, {
        trigger: 'axis',
        formatter: '{b}<br/>{a0}: {c0}%<br />{a1}: {c1}%'
      })
    }
  } catch(e){}
}
getVipData()
</script>

<style scoped lang="scss">
.page{
  position: relative;
  height: 100%;
}
.table-box{
  position: relative;
  padding-bottom: 20px;
}
</style>
